<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="/css/my01.css">
</head>
<body>
<!--导航条-->
<div class="m-container">
    <nav class="ui segment inverted attached m-padded-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui teal header item"> L E A R N </h2>
                <a th:href="@{/system/front/learn}" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <p th:if="${user != null}" id="username" class="m-item item m-mobile-hide"><i class="user icon"></i>[[${user.userName}]]</p>
                <a th:if="${user != null}" href="javascript:;" class="m-item item m-mobile-hide"><i class="fa fa-circle text-success"></i> 在线</a>
                <a th:if="${user != null}" th:href="@{/logout}" style="padding-left:5px;" class="m-item item m-mobile-hide"><i class="fa fa-sign-out text-danger"></i> 注销</a>
                <a th:unless="${user != null}" th:href="@{/login}" class="m-item item m-mobile-hide"><i class="user icon"></i>去登录</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon inverted transparent input m-margin-tb-tiny">
                        <!--全局搜索-->
                        <form name="search" action="#" th:action="@{/system/front/learn}" method="POST" target="_blank">
                            <div class="ui icon inverted transparent input m-margin-tb-tiny">
                                <input type="text" name="title" placeholder="Search...." th:value="${title}">
                                <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <a href="" class="black t_menu icon ui button m-mobile-show m-right-top ">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!--中间部分-->
    <div class="m-container m-padded-tb-large">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--左边博客内容-->
                <div class="eleven wide column">
                    <!--header-->
                    <div class="ui top attached segment">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <h3 class="ui teal header"> L E A R N </h3>
                            </div>
                            <div class="right aligned column">
                                共 <h2 class="ui orange header m-inline-block" th:text="${contents.size}">14</h2>篇
                            </div>
                        </div>
                    </div>
                    <!--content-->
                    <div class="ui attached segment">

                        <div class="ui vertical segment" th:each="content:${contents}">
                            <div class="ui stackable grid mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="header" ><a href="#" th:href="@{/system/front/detail/{contentId}(contentId=${content.contentId})}" th:text="${content.title}" >你真的理解什么是财富自由吗？</a></h3>
                                    <p class="m-text" th:utext="|${content.contentDesc}......|">正确做好任何一件事的前提是清晰，正确的理解目标，
                                        而事实上我们很多人对于目标没有明确的定义，甚至根本就没有目标</p>
                                    <a href="#" th:href="@{/system/front/detail/{contentId}(contentId=${content.contentId})}">更多>></a>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <i class="user icon"></i>
                                                    <span th:text="${content.creatorName}" >小明</span>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>
                                                    <span th:text="${#dates.format(content.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>
                                                    <span th:text="2342">2342</span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--右边博客内容-->
                <div class="five wide column">
                    <!--动态展示分类-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="idea icon"></i>标签
                                </div>
                                <div class="right aligned column">
                                    <a href="">more <i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal segment">
                            <div class="ui vertical menu fluid" >
                                <a class="item" th:each="tag:${tags}">
                                    <span th:text="${tag.dictLabel}"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <i class="bookmark icon"></i>最新推荐
                        </div>
                        <div class="ui segment" th:each="content:${contents}">
                            <a  th:href="@{/system/front/detail/{contentId}(contentId=${content.contentId})}" target="_blank" class="m-black" th:text="${content.title}">用户故事</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<script type="text/javascript">
    $(".t_menu").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    })
</script>
</html>